<!--
*******************************************************************************
 * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

 <div class="card">
    <div class="card-header">
        <i class="fa fa-tags mr-2 text-danger"></i>
        <span class="font-weight-bold">
          <span class="mr-2 text-info">{{appServiceKey}}</span>
          <span i18n>Configurable Setting</span>
        </span>
    </div>
    <div class="card-body">
      <div class="card">
        <div class="card-header">
          <ul class="nav nav-tabs card-header-tabs font-weight-bold">
            <li class="nav-item" (click)="configurableSectionChange('Trigger')">
                <a class="nav-link" role="button" [class.active]="configurableSection === 'Trigger'" i18n>Trigger</a>
              </li>
            <li class="nav-item" (click)="configurableSectionChange('PipelineFunc')">
                <a class="nav-link" role="button" [class.active]="configurableSection === 'PipelineFunc'" i18n>Pipelines</a>
            </li>
            <li class="nav-item" (click)="configurableSectionChange('InsecureSecrets')">
                <a class="nav-link" role="button" [class.active]="configurableSection === 'InsecureSecrets'" i18n>Insecure Secrets</a>
            </li>
            <li class="nav-item" (click)="configurableSectionChange('StoreAndForward')">
                <a class="nav-link" role="button" [class.active]="configurableSection === 'StoreAndForward'" i18n>Store And Forward</a>
            </li>
          </ul>
        </div>
        <div class="card-body">
            <div *ngIf="configurableSection === 'Trigger'">
                <app-appsvc-trigger [configTrigger]="configTrigger"></app-appsvc-trigger>
            </div>
            <div *ngIf="configurableSection === 'PipelineFunc'">
                <app-appsvc-pipeline 
                [appServiceKey]="appServiceKey"
                [pipeline]="configWritable.Pipeline"></app-appsvc-pipeline>
            </div>
            <div *ngIf="configurableSection === 'InsecureSecrets'">
                <app-appsvc-insecure-secrets
                [appServiceKey]="appServiceKey"
                [insecureSecrets]="configWritable.InsecureSecrets"></app-appsvc-insecure-secrets>
            </div>
            <div *ngIf="configurableSection === 'StoreAndForward'">
                <app-appsvc-store-and-forward 
                [appServiceKey]="appServiceKey"
                [storeAndForward]="configWritable.StoreAndForward"></app-appsvc-store-and-forward>
            </div>
          </div>
        </div>
    </div>
 </div>


